<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import axios from 'axios'
import { showToast } from 'vant'

const router = useRouter()
const active = ref(0) // 默认首页

// 门诊服务列表
const outpatientServices = [
  { id: 1, title: '预约挂号', icon: 'clock-o', color: '#ff9d96', path: '/booking' },
  { id: 2, title: '在线复诊', icon: 'chat-o', color: '#7cd6cf', path: '/online-consultation' },
  { id: 3, title: '门诊缴费', icon: 'balance-o', color: '#7cd6cf', path: '/outpatient-payment' },
  { id: 4, title: '在线支付', icon: 'balance-list-o', color: '#24b87d', path: '/online-payment' },
  { id: 5, title: '报告查询', icon: 'notes-o', color: '#7cd6cf', path: '/report-query' },
  { id: 6, title: '取药配送', icon: 'logistics', color: '#ff9d96', path: '/medicine-delivery' },
  { id: 7, title: '医保服务', icon: 'shield-o', color: '#7cd6cf', path: '/medical-insurance' },
  { id: 8, title: '电子发票', icon: 'bill-o', color: '#ff9d96', path: '/e-invoice' }
]

// 住院服务列表
const inpatientServices = [
  { id: 1, title: '住院服务', icon: 'hotel-o', color: '#7cd6cf', path: '/hospitalization' },
  { id: 2, title: '住院预交', icon: 'balance-pay', color: '#ff9d96', path: '/prepayment' },
  { id: 3, title: '住院清单', icon: 'description', color: '#7cd6cf', path: '/inpatient-bill' },
  { id: 4, title: '出院登记', icon: 'sign', color: '#ff9d96', path: '/discharge' }
]

// 医疗服务列表
const medicalServices = [
  { id: 1, title: '体检预约', icon: 'flag-o', color: '#7cd6cf', path: '/physical-exam' },
  { id: 2, title: '核酸检测', icon: 'filter-o', color: '#ff9d96', path: '/nucleic-acid' },
  { id: 3, title: '病案复印', icon: 'records', color: '#7cd6cf', path: '/medical-record' },
  { id: 4, title: '便民服务', icon: 'service-o', color: '#ff9d96', path: '/convenience' }
]

const swiperList = ref([
  {
    id: 1,
    title: '就诊指南',
    subTitle: '帮助您了解就医流程',
    background: '#338bff'
  },
  {
    id: 2,
    title: '预约须知',
    subTitle: '在线预约挂号说明',
    background: '#338bff'
  },
  {
    id: 3,
    title: '医院介绍',
    subTitle: '了解医院基本情况',
    background: '#338bff'
  }
])

function handleTabChange(index) {
  if (index === 1) {
    router.push('/')
  }
}

// 检查登录状态
const checkLogin = () => {
  const token = localStorage.getItem('token')
  const userid = localStorage.getItem('userid')
  if (!token || !userid) {
    showToast('请先登录')
    router.push('/login')
    return false
  }
  return true
}

// 处理服务点击
async function handleServiceClick(service) {
  if (!checkLogin()) return

  try {
    // 根据服务类型调用不同的接口
    switch (service.path) {
      case '/register':
        // 预约挂号
        const registerRes = await axios.get('http://localhost:8000/service/register/departments', {
          headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
        })
        router.push({ path: service.path, query: { departments: JSON.stringify(registerRes.data.data) } })
        break

      case '/outpatient-payment':
        // 门诊缴费
        const paymentRes = await axios.get('http://localhost:8000/service/payment/bills', {
          headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
        })
        router.push({ path: service.path, query: { bills: JSON.stringify(paymentRes.data.data) } })
        break

      case '/report-query':
        // 报告查询
        const reportsRes = await axios.get('http://localhost:8000/service/reports', {
          headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
        })
        router.push({ path: service.path, query: { reports: JSON.stringify(reportsRes.data.data) } })
        break

      case '/hospitalization':
        // 住院服务
        const hospitalRes = await axios.get('http://localhost:8000/service/hospital/info', {
          headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
        })
        router.push({ path: service.path, query: { info: JSON.stringify(hospitalRes.data.data) } })
        break

      case '/physical-exam':
        // 体检预约
        const examRes = await axios.get('http://localhost:8000/service/physical/packages', {
          headers: { Authorization: `Bearer ${localStorage.getItem('token')}` }
        })
        router.push({ path: service.path, query: { packages: JSON.stringify(examRes.data.data) } })
        break

      default:
        // 其他服务直接跳转
        router.push(service.path)
    }
  } catch (error) {
    showToast(error.response?.data?.message || '服务暂时不可用')
  }
}

onMounted(async () => {
  const token = localStorage.getItem('token')
  const headers = { Authorization: `Bearer ${token}` }

  const relRes = await axios.get('http://127.0.0.1:8000/user/relationtypes/', { headers })
  console.log('关系接口返回', relRes.data)
  relationTypes.value = (relRes.data.data || []).map(i => ({ name: i.name, value: i.value }))

  const idRes = await axios.get('http://127.0.0.1:8000/user/idtypes/', { headers })
  console.log('证件类型接口返回', idRes.data)
  idTypes.value = (idRes.data.data || []).map(i => ({ name: i.name, value: i.value }))
})

</script>

<template>
  <div class="index-page">
    <!-- 顶部轮播 -->
    <van-swipe class="banner" :autoplay="3000" :show-indicators="true" indicator-color="white">
      <van-swipe-item v-for="item in swiperList" :key="item.id">
        <div class="banner-content" :style="{ background: item.background }">
          <div class="banner-text">
            <h2 class="banner-title">{{ item.title }}</h2>
            <p class="banner-subtitle">{{ item.subTitle }}</p>
          </div>
        </div>
      </van-swipe-item>
    </van-swipe>

    <!-- 门诊服务 -->
    <div class="service-section">
      <div class="section-title">
        <van-icon name="bars" style="margin-right: 5px;" />
        门诊服务
      </div>
      <div class="service-grid">
        <div
          v-for="service in outpatientServices"
          :key="service.id"
          class="service-item"
          @click="handleServiceClick(service)"
        >
          <div class="service-icon" :style="{ background: service.color + '15' }">
            <van-icon :name="service.icon" :color="service.color" size="24" />
          </div>
          <span class="service-name">{{ service.title }}</span>
        </div>
      </div>
    </div>

    <!-- 住院服务 -->
    <div class="service-section">
      <div class="section-title">
        <van-icon name="bars" style="margin-right: 5px;" />
        住院服务
      </div>
      <div class="service-grid">
        <div
          v-for="service in inpatientServices"
          :key="service.id"
          class="service-item"
          @click="handleServiceClick(service)"
        >
          <div class="service-icon" :style="{ background: service.color + '15' }">
            <van-icon :name="service.icon" :color="service.color" size="24" />
          </div>
          <span class="service-name">{{ service.title }}</span>
        </div>
      </div>
    </div>

    <!-- 医疗服务 -->
    <div class="service-section">
      <div class="section-title">
        <van-icon name="bars" style="margin-right: 5px;" />
        医疗服务
      </div>
      <div class="service-grid">
        <div
          v-for="service in medicalServices"
          :key="service.id"
          class="service-item"
          @click="handleServiceClick(service)"
        >
          <div class="service-icon" :style="{ background: service.color + '15' }">
            <van-icon :name="service.icon" :color="service.color" size="24" />
          </div>
          <span class="service-name">{{ service.title }}</span>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <van-tabbar v-model="active" @change="handleTabChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="user-o">个人中心</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<style scoped>
.index-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 50px;
}

.banner {
  height: 160px;
  background: #338bff;
}

.banner-content {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: white;
  text-align: center;
  padding: 20px;
}

.banner-text {
  text-align: center;
}

.banner-title {
  font-size: 24px;
  font-weight: bold;
  margin: 0 0 10px 0;
  color: white;
}

.banner-subtitle {
  font-size: 14px;
  margin: 0;
  color: rgba(255, 255, 255, 0.9);
}

.service-section {
  margin: 12px;
  padding: 16px;
  background: white;
  border-radius: 8px;
}

.section-title {
  font-size: 16px;
  font-weight: bold;
  color: #333;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
}

.service-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
}

.service-name {
  font-size: 12px;
  color: #333;
  text-align: center;
}
</style> 